<template>
	<view>
		<view class="aa">
			<view class="aa1" style="margin-top:300rpx;margin-left:30rpx;display: flex;">
				<view class="w">
					17.85w车友正在热聊
				</view>
				<view style="height:80rpx;width:2rpx;margin-left:20rpx;margin-top:10rpx;background-color: #808080;">
					
				</view>
				<view class="w" style="margin-left:20rpx">
					打开最新地点
				</view>
			</view>
			<image style="width:100%;height:100%"src="../../static/images/fq/ls.png" mode="aspectFill"></image>
			
		</view>
		
		
		<view class="aa2" style="margin-top:70rpx;margin-left:30rpx;display: flex;">
			<view class="w">
				关注过的车圈
				<view >
					西藏驴友论坛
				</view>
				<view >
					凯迪拉克CT6论坛
				</view>
			</view>
			<view class="w">
				热门车圈
				<view >
					特斯拉刹车失灵
				</view>
				<view >
					本田上海车展
				</view>
			</view>
			
		</view>
		<view style="width:690rpx;margin-left: 30rpx;margin-top:20rpx">
			
			<view class="">
				<!-- 上面动态切换 -->
				<view class="title-view">
					<text @tap="changeIndex(index)" class="text-view" :class="{'active':currentIndex==index}"
						v-for="(item,index) in list" :key="item" style="margin-left:30rpx;">{{item}}</text>
				</view>
			
				<!-- 下面滑块 -->
				<swiper :current="currentIndex" @change="changetab" style="height:90vh">
				<swiper-item>
					<scroll-view scroll-y="true" class="aacb">
						
					
					<view v-if="currentIndex == 0" >
						<view style="width:98%;height:1100rpx;margin-top: 20rpx;">
							<view style="height:48%;width:100%;;display: flex;">
								<view style="width:48%;height:100%;">
									<view style="height:70%;">
										<image style="width:100%;height:100%;margin-left:10rpx;border-radius: 15rpx;"src="../../static/images/fq/cy4.png" mode="aspectFill"></image>
									</view>
											<view style="height:28%;font-size: 22rpx;padding:25rpx">
												美孚(Mobil)美孚速霸2000全合成机油 5W-4W
											
											</view>
								</view>
										<view style="width:48%;height:100%;font-size: 22rpx;">
											<view style="height:70%;">
												<image style="width:100%;height:100%;margin-left:20rpx;border-radius: 15rpx;"src="../../static/images/fq/cy1.png" mode="aspectFill"></image>
											</view>
											<view style="height:30%;font-size: 22rpx;padding:25rpx">
												亮牌(Shell)全合成机油汽车润滑油 汽车机油发动机
												
											</view>
										</view>
							</view>
									<view style="height:48%;width:100%;;display: flex;">
										<view style="width:48%;height:100%;">
											<view style="height:70%;">
												<image style="width:100%;height:100%;margin-left:10rpx;border-radius: 15rpx;"src="../../static/images/fq/cy2.png" mode="aspectFill"></image>
											</view>
											<view style="height:30%;font-size: 22rpx;padding:25rpx">
												福特(FORD)原厂几率(新蒙迪欧/翼虎/致胜)
												
											</view>
											
										</view>
										<view style="width:48%;height:100%;">
											<view style="height:70%;">
												<image style="width:100%;height:100%;margin-left:20rpx;border-radius: 15rpx;"src="../../static/images/fq/cy3.png" mode="aspectFill"></image>
											</view>
											<view style="height:30%;font-size: 22rpx;padding:25rpx">
												亮牌(Shell)发动机清洗油4L 汽车用品
												
											</view>
										</view>
									</view>
									
						</view>
						
					</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item style="height:100vh" >
					<scroll-view scroll-y="true" class="b" >
						
					
					<view v-if="currentIndex == 1" >
						<view style="width:100rpx;height:500rpx;border:1px solid red" >
							
						</view>
					</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<view v-if="currentIndex == 2" ><text>选项卡3的内容</text></view>
				</swiper-item>
				<swiper-item>
					<view v-if="currentIndex == 3" ><text>选项卡4的内容</text></view>
				</swiper-item>
				</swiper>
			</view>
			
		</view>
		
	</view>
	
</template>

<script>
	
	
	export default {
		data() {
			return {
			list: ["推荐", "动态", "通城","商家活动"],
			swiper: ["A", "B", "C","D"],
			currentIndex: 0,	
			}
		},
		methods: {
			changeIndex(index) {
				this.currentIndex = index;
			},
			changetab(e){
				this.currentIndex=e.detail.current;
			}
		}
	}
</script>

<style>
	.aacb{
		height:calc(100vh - 130rpx)
	}
	.b{
		height: calc(100vh - 100rpx);
	}

	.active {
		font-weight: 800;
	}
.aa{
	width: 750rpx;
	height: 350rpx;
	position: relative;
}
.aa1 {
	position: absolute;
	width: 690rpx;
	height: 104rpx;
	margin:10rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 6rpx 12rpx 0rpx 
		rgba(0, 0, 0, 0.16);
	border-radius: 20rpx;
}
.aa2 {
	width: 690rpx;
	height: 286rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 6rpx 12rpx 0rpx 
		rgba(0, 0, 0, 0.16);
	border-radius: 20rpx;
}
.w {
	width:47%;
	height:80rpx;
	line-height: 80rpx;
	text-align: center;
	font-weight: 800;
	margin-top:10rpx;
}
.aa12{
	width: 264rpx;
		height: 40rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #252525;
}
</style>
